NaN

第1节 Html基础

小目标: 用html标签完成页面结构

(一) 开发工具和快捷键

详看开发工具一节

(二) 认识网页

  1. 一个html文件用浏览器打开就是一个网页
  2. 什么是标签(元素)
    • html 根标签
    • body标签 主体(身体) 主要用来放网页的内容
    • head标签 主要用来对网页进行设置

(三) 常用标签和标签的属性

(1) 常用标签

  1. h1~h6 标题标签
  2. div 区块标签(大)
  3. p 段落标签
  4. span 区块标签(小)
  5. ul(ol) 列表标签
  6. li 列表标签选项
  7. a 链接标签
  8. img 图片标签
  9. input输入框
    • 文本输入框
    • 多选框
    • 单选框
  10. button 按钮标签

例1: h1~h6, div, p, span 

// demo1.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第一个网页</title>
    </head>
    <body>
        
        hello 网页

    </body>
</html>

// demo2.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标题标签 -->
     <h1>h1111111111111111111111111</h1>   
     <h2>h1111111111111111111111111</h2>   
     <h3>h1111111111111111111111111</h3>   
     <h4>h1111111111111111111111111</h4>   
     <h5>h1111111111111111111111111</h5>   
     <h6>h1111111111111111111111111</h6>   

     <!-- 区块标签(用得最多的一个标签) -->
     <div>div1111111111</div>
     <div>div1111111111</div>
     <div>div1111111111</div>

     <!-- 段落标签 -->
     <p>pppppppppppppppp</p>
     <p>pppppppppppppppp</p>
     <p>pppppppppppppppp</p>
     <p>pppppppppppppppp</p>

     <!-- 区块标签(小) -->
     <span>span1</span>
     <span>span2</span>
     <span>span3</span> 

</body>
</html>

例2: ul(ol), li 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
   <ul>
       <li>1111</li>
       <li>2222</li>
       <li>3333</li>
       <li>4444</li>
       <li>5555</li>
       <li>6666</li>
   </ul>    
   
      <!-- 有序列表 -->
      <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
      </ol>  

</body>
</html>

例3: a, img 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
   <ul>
       <li>1111</li>
       <li>2222</li>
       <li>3333</li>
       <li>4444</li>
       <li>5555</li>
       <li>6666</li>
   </ul>    
   
      <!-- 有序列表 -->
      <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
      </ol>   
</body>
</html>

例4: input输入框

  • 文本输入框
  • 密码输入框
  • 单选框
  • 多选框
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <!-- 文本输入框 -->
 <input type="text" placeholder="请输入手机号码"> <br/>

 <!-- 密码输入框 -->
 <input type="password" placeholder="请输入密码"> <br/>

 <!-- 单选框,添加name=xxx实现单选 -->
 男<input type="radio" name="aaa">
 女<input type="radio" name="aaa"> <br>

 <!-- 多选框 -->
 篮球<input type="checkbox">
 足球<input type="checkbox">
 羽毛球<input type="checkbox"> 

</body>
</html>

例5: button 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>注册</button>

  <input type="button" value="登录">
</body>
</html>

(2) 标签的分类 

- 块级标签, 不管标签的内容有多少, 都要占一行
- 行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 块级标签 -->
    <div class="div"> div标签 </div>
    <!-- 块级标签 -->
    <p class="p"> p标签 </p>
    <!-- 行内标签 -->
    <a class="aa" href="">a标签</a>
    <span class="span">span标签</span> 
    <!-- 把行内标签放入块级标签实现换行 -->
    <p> <input type="text"> </p>
    <p> <input type="text"> </p>
</body> 
</html>

(3) 标签嵌套

  1. 每个标签可以看做是一个"盒子"
  2. 大盒子可以装小盒子 注意: p标签不能嵌套其它的块级标签

​

(四) 作业

使用所学标签完成百度注册页面